<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 概述 JavaScript 库 
        // 仓库：可以把很多东西放到仓库里面，找东西只需要到仓库里找就可以
        // JavaScript库：即library，是一个封装好的特定集合(方法和函数),从封装函数的角度理解，就是这个库中封装了很多预先定义好的函数。
        // 就是一个JS文件，里面对js代码进行封装，存放到里面，我们可以快速高效使用封装好的功能
        // jQuery就是为了快速方便的操作DOM，里面基本都是函数(方法)
        // 常见的js库
        // jQuery prototype YUL Dojo Ext-JS 移动端的zepto 

        // jQuery 是一个快速，简洁的JavaScript库，设计宗旨，倡导写更少的代码，做更多的事
        // 封装javaScript常用功能代码，优化DOM操作，事件处理，动画设计，Ajax交互
        // 学习调用函数方法
        //jQuery 的优点
        // 轻量级，核心文件才几十kb，简化DOM操作
        // 跨浏览器兼容，基本兼容了现在主流的浏览器
        // 链式编程，隐式迭代
        // 对事件，样式，动画支持
        // 支持插件扩展开发，有丰富的第三方插件
        // 免费，开源

        // 等着页面加载完 再去执行js
        $(function() {
                $('div').hide(); //将盒子隐藏
            })
            // 相当于原生js中的DOMContentLoaded
            // 不同于load事件

        // $符号 入口函数是JQuery的别称，是顶级对象，相当于js中的window
    </script>
</body>

</html>